<template>
  <view class="wrapper">
    <view class="title">基础轮播图</view>
    <!-- 强制指定高度并简化属性写法 -->
    <swiper 
      class="swiper-box" 
      indicator-dots 
      autoplay 
      interval="3000" 
      circular
    >
      <swiper-item>
        <view class="swiper-item bg-blue">
          <text>页面 1</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item bg-green">
          <text>页面 2</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item bg-yellow">
          <text>页面 3</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style scoped>
.wrapper {
  padding: 15px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
}

/* 关键：通过scoped+类名确保高度生效 */
.swiper-box {
  height: 200px !important; /* 强制高度生效，避免被覆盖 */
  width: 100%; /* 确保宽度占满父容器 */
  overflow: hidden; /* 防止内容溢出 */
}

.swiper-item {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 提取背景色为类名，避免内联样式冲突 */
.bg-blue {
  background-color: #007aff;
}
.bg-green {
  background-color: #4cd964;
}
.bg-yellow {
  background-color: #f0ad4e;
}

.swiper-item text {
  color: white;
  font-size: 24px;
}
</style>